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& Никита Сидоров закончил подготовку доклада за 2 минуты до выступления + 8 о 


Frontend Conf проходит с необычайным размахом. Спикеры и 
слушатели довольны Природа и наука 6, Никита Сидоров закончил подготовку 
доклада за 2 минуть до выступления 


Вот что у нас есть на тему 


Левенсон Семен начал свой доклад про инженерный подход к диз. системе 


Мир фронтенда скучает по ламповым 
выпускам Егопіепа М/еекепа 
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Подписаться · 31,47 2 
Егопїепа Сопі проходит с необычайным 


Olympics.com | медиа-портал МОК © қ Московский Планетарий © размахом. Спикеры и слушатели довольны 


Е 


жее из подписок ? Крупнейший в России цє 
популяризации... Левенсон Семен начал свой доклад про 
Подписаться. 6,2К инженерный подход к диз. системе 
8 минут назад 
Антон Войцеховский 9 Си Цзиньпин переизбран генсеком 
(5 1) К Компартии Китая 
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+ Создать 
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л В Ы. 


Навести порядок 
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4 ТУЮ ша 


Навести порядок 
с цветами 
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Темная тема 
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Дизойнер 


БАЖНО 


+ ГЛАВА 1: ТОКЕНЫ 


ДОКУМЕНТАЦИЯ 


Яндекс Дзен » Дизайнв Дзене » Дизайн-система 


% Семен Левенсон \/ А Доступно не только Яндексу 7” Редактировать @ Подписан на раздел 
Обновлено 1 декабря, 2021 в 15:09 


Дизайн-система 


Чат в слак: https://yazen.slack.com/archives/CO265KSCE4E 
Еженедельный синк: тето , календарь 


Команда дизайн системы: 
@semeleven "менеджер", веб 
@andreytetekin дизайн 
@gak0404 ios 

@garborezki android 

@cirrhoz дизайн консультант 


Токены 


Работа с токенами пока происходит с помощью утилиты design_colors (в разработке). Ниже можно увидеть то, что уже токенизированно 


Цвета 


Есть палитра фиксированных цветов (тыц), с использованием их строится семантическая палитра, с разделением на темную и светлую тему (тыц). Так же 
имеется спецификация, по тому, как использовать тот или иной цвет (тыц). 


Статус внедрения: 
йдта - файл, плагин для валидации файла со всеми цветами 
дивкиты, кодогенерация 
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ДОКУМЕНТАЦИЯ 


Фоны 


Цвет фона меняєтся в зависимости от его расположения по оси 7. В светлой теме часто 
используется тень, для визуального отделения высоты. В темной теме для этого используется 
оттенок, поэтому светлье фоны не меняются, а темные меняются. 


Overflow 


Primary 


Secondary 


Tertiary 


Overflow 


Primary 


Secondary 


Tertiary 


Базовый фон apT6opna при создании макета 


Фон, используемых для карточек, навигации (пам bar, tab bar) и 
других элементов лежащих поверх overflow 


Может использоваться для «поднятых» или elevated элементов и 
злементов лежащих поверх ргітагу 


В основном используется для «поднятых» или elevated элементов 
и злементов лежащих поверх 5есопаагу 
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Color styles [1] = + 
О, 


® Colors & Effects 


Light/Background 


Light/Text and icons 


эз © 


Light/Fill 


PIPELINE ТОКЕНОВ 


PIPELINE ТОКЕНОВ 


РеподиТорић с 
тоКеНоМи 


Двтомотический PR/MR 
WAW eytKamu 


PIPELINE ТОКЕНОВ 


РетодиТорий с 
ТокеНаМи, 


Figma -> Style Dictionary 
Style Dictionary Конфиги 


| ОТОВО 


.Class { 


) 


color: var(--zenColorTextAndiconsPrimary); 
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ГОТОВО, ПОЧТИ 


.Class í 
color: var(--zenColor TextAndlconsPrimary); 


) 
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| ОТОВО 


const media = window.matchMedia('(prefers-color-scheme: dark)’); 
const update = () => í 
const enableDarkMode = media.matches; 
document.documentElement.classList.toggle('document_dark_yes', enableDarkMode); 
} 
media.addEventListener('change', update); 
update(); 
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| ОТОВО 


window.matchMedia(‘(prefers-color-scheme: dark)’; 
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ПРОЦЕССЫ 


Сценарии разработчика 


Т ТТТ 


Дизайнер нарисовал макет, но не использовал семантические цвета. Кидаете дизайнеру ссылку на семантическую палитру и просите перевести на 


семантику. По этой же ссылке во вкладках можно найти и спецификацию, и список всех цветов. Позже будет инструмент для поиска семантических цветов по 


значению, возможно дизайнер решил не добавлять палитру специфичных цветов 


Дизайнер нарисовал макет, но вы видите, что в коде нет какого-то семантического цвета. Если для вашей платформы поддержана кодогенерация 
(смотрите выше список платформ), то воспользуйтесь ей и синхронизируйте цвета с фигмой. Если нет, вы можете добавить этот семантический цвет вручную 
(куда, кликайте на нужную платформу выше) 


В макете используется семантический цвет, но по названию, на ваш взгляд, он не подходит. Не понятно, как такую ситуацию можно проверять 
автоматически. Поэтому, в таком случае, стоит обратить на это внимание дизайнера и: 


— либо осознанно пойти на этот шаг и использовать этот токен. В будущем, при изменении значения токена, могут быть неожиданные баги. 


— либо попросить дизайнера завести токен с более подходящим названием использовать его 


Дизайнер нарисовал макет, но в темной и светлой темах использовались разные семантические цвета для одной и той же вьюхи. Такого не должно 
быть, в этом случае вы просите дизайнера поправить макет и сделать вьюхам один цвет для темной и светлой тем, либо завести отдельный токен для этого 


Макеты для ваших фичей рисует дизайнер из ПП и не использует дзеновскую палитру. Несмотря на то, что мы засинкали наши с ПП палитры на словах, 
какие-то проблемы все еще могут возникать. В таком случае можно писать в #design_system чатик в слаке, и мы будем решать этот вопрос. Как только наши с 
ПП палитры обьединяться, то проблема исчезнет 


«2 Дзен 


44 


КОММУНИКАЦИЯ 


-ф-Обший канал в телеге 
+ Написали в локальные чаты 


-4- Демо и общие встречи 
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+ ГЛАВА 2: ТОЧКА "А" 


136 УНИКАЛЬНЫХ ЦВЕТОВ 


Colors 


Sort by source order 


#f f f 

#000 

гед 
гоба(0,0,0,0) 
#1с0 
гоба(0,0,0,.06) 
rgba(0,0,0,.4) 
rgba(50,50,50,.2) 
#ecef f1 
#29363с 
#d62b2b 
гоба(0,0,0,.3) 
гоба(0,0,0,.05) 
#8b93a5 
#090d12 
гдра(0,0,0,.1) 


#07 Ff 


1514а(0, 055, 100%, .8) 


rgba(0,0,0,.2) 


һѕ1а(0, 055, 100%, .6) 


hsla(@,0%,80.4%,. 


rgba(50,50,50, .9) 


@ Sort by color 


Size by usage @ Size evenly 


rgba(51, 51, 51, 0.05) 
rgba(0, 0, 0, 0.58) 
rgba(0, 0, 0, 0.04) 
rgba(5, 24, 38, 0.2) 
гара(255 255,255, 0.15) 
rgba(0, 0, 0, 0.15) 
rgba(232, 193, 193, 0.45) 
rgba(50, 50, 50, 0.9) 
гоба(д, 0, 0, 0.11) 

гар( 3738742) 

гдра(0, 0, 0, 0.25) 

гоба( 255 1255 255, 

го (0, 94, 202) 

rgba(243, 243, 242, 
rgb(255, 66, Q) 

габа( 2557255 4255. 

го (240, 0, 0) 

rgb(35, 35, 37) 

rgb(29, 30, 34) 

гоба (255; 255, 255; 0:06) 
rgba(51 51 51, 0:85) 


гара(255 5255, 255 10.12) 


гдра(0, 0, 0, 0.03) 
гоба (255: 2551. 255. 
rgb(236, 234, 230) 
rgb(9, 13, 18) 
rgba(255, 255, 255, 
rgba(255, 255, 255, 
rgb(44, 183, 66) 
rgb(82, 129, 183) 
rgb(238, 130, 10) 

Gob (Aye ТБ 217) 
rgb(68, 165, 239) 
rgb(69, 109, 176) 
rgb(102, 94, 165) 
гдра(0, 0, 0, 0.18) 
rgb(45, 146, 250) 
rgb(240, 247, 255) 
габа(д, 96, 205, 0.06) 
rgba(255, 255, 255, 0.03) 
rgb(227, 225, 220) 
гоба(205, 205, 205, 0.9) 
rgb(62, 66, 70) 


rgb(85, 193, 81) 
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ПОВЪШАЕМ ТОЧНОСТЬ 


«2 Дзен 


Москва 


8-9 ноября, 2019 


Поиск с CSS Оейпійоп Syntax 


csstree.lexe 


csstree.lexe , 


Й 


A 


csstree. lexe 


—2@ зетгиен 


Роман Дворнов — CSS definition syntax 


1 552 просмотра 13 anp. 2020 г. Ближайшая конференция: 
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СТРУКТУРНЬИ ПОИСК 


1Ғ (width <= 1280 && height <= 800) í 
return 1; 


if (width <= 


return 1; 


} 
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ПОВЪШАЕМ ТОЧНОСТЬ 


/(2:(7--4412)(2 му12)1(7«2м НМ)(?-462)) 8 | Ма-ТА-Г КЭ,8))Ю/0: 
Логоба?М.+ “а; 


Лба!рпа?\(.+?\)/а: 


RIPGREP 


"path": í 
чехї": "ul-lib/src/button/button.styl" 


} 


"вуиуртаїспез": | 


"match": ( 
"гара(255, 255, 255, 0.92)" 
}, 
) 
| 
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PIPELINE ТОКЕНОВ 


#000 
rebo О, О, О, 1 
90, О, О) 


PIPELINE ТОКЕНОВ 
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PIPELINE ТОКЕНОВ 


#000 
rebo О, О, О, 1) — s. сі rqbOO, О, О) 
bO, 0, 0) с 


сигомо.-15 (сојогој, culor, 


2) 


56 


НЕП 6% 


УЗ 
Ё ы 
1 УДА 
рыс 


090000000 
Рр 4? 


4 Ñi я 
ф 
1 
Ч 


МИГРАЦИЯ ЦВЕТОВ 


НЕЕ еее. var(--zenAccentsRed) 


МИГРАЦИЯ ЦВЕТОВ 


#ff5b5b mm var(--zenAccentsRed) 


ЖЕРЕ >S$colorFixedPrimaryWhite 
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МИГРАЦИЯ ЦВЕТОВ 


#ff5b5b еее. var(--zenAccentsRed) 


ж” var (--zenBackgroundPrimary) 


ЖЕРЕ >S$colorFixedPrimaryWhite 
Заг (--zenBackgroundSecondary) 
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МИГРАЦИЯ ЦВЕТОВ 


#ff5b5b еее. var(--zenAccentsRed) 


ж” var (--zenBackgroundPrimary) 


ЖЕРЕ >S$colorFixedPrimaryWhite 
ми yar (--zenBackgroundSecondary) 


НОРУрба Mom var(--zenAccentsRed) 
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МИГРАЦИЯ ЦВЕТОВ 


#ff5b5b еее. var(--zenAccentsRed) 


ж” var (--zenBackgroundPrimary) 


ЖЕРЕ >S$colorFixedPrimaryWhite 
ми yar (--zenBackgroundSecondary) 


2727 


#ff5b5a J—a—. З var (--zenAccentsRed) 
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+ ГЛАВА 3: СРАВНЕНИЕ 


# 


7 
Цвета в С55 


София Валитова 


Зал "Аудитория 1", 16:50 


Frontend 
FC Conf 2o22 


4 Ф 
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OPEN SOURCE ПОМОГАЕТ 


chroma.deltaE (color), color2, Ki=1, Ke=1, Kh=1) 


Computes color difference as developed by the International 
Commission on Illumination (CIE) іп 2000. The implementation 15 
based on the formula from Bruce Lindbloom. Resulting values range 
from 0 (no difference) to 100 (maximum difference), and are a metric 
for how the human eye percieves color difference. The optional 
parameters KI, Kc, and Kh may be used to adjust weightings of 
lightness, chroma, and hue. 


chroma.deltaE('#ededee', "#едедее"); 0 
chroma.deltaE( '#ededee', ‘#edeeed'); 1.321 
chroma.deltaE('#ececee', '#есееес'); 2.602 
chroma.deltaE( '#e9e9ee', '#e9eee9'); 6.221 
chroma.deltaE( '#e4e4ee', '#е4еее4'); 11.598 
chroma.deltaE ( '#e0e0ee', '#e0eee0'); 15.391 


chroma.deltaE (МИЦ, '#ffffff'); 
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МЕРҖИЛКА 


Показывать зарезолвенные цвета 


Показывать плоско 


Divkit ios Android Web 


near 


- 


rgb(254,84,25) 


(1 
(1 


rgb(254,254,254) 


rgba(255,255,255,0.25) 


> 


rgba(0,0,0,0.42) 


rgba(0,0,0,0.48) 


о 


г95(4,118,255) 


похожий 


rgb(255, 83, 23) 
orange_50 


rgb(255, 255, 255) 
primary_white 


rgba(255, 255, 255, 0.24) 
white_alpha_24 


гара(0, 0, 0, 0.4) 
ріаск аїрпа 40 


габа(0, 0, 0, 0.45) 
black_alpha_45 


rgb(0, 119, 255) 
blue_50 


РАССТОЯНИЕ 


0.197 


0.198 


0.280 


0.287 


0.365 


0.393 


МЕСТА ИСПОЛЬЗОВАНИЯ 


Web: 1 


.Ipublishers/client/components/publications/publications-year-results-banner/publications-year-results-banner-view.styl 


Web: 1 


./publishers/client/components/common/card/card.styl 


Web: 2 


./publishers/client/components/author-live/author-live-event-log/author-live-event-log.sty| 
./ui-lib/src/chat-info/chat-info.tsx 


Web: 2 


./rezen/src/comments/comment-editor-live-stream-container/comment-editor-live-stream-container.sty 
./rezen/src/comments/comment-editor/comment-editor-view.sty! 


Web: 2 


./publishers/client/components/common/card-cover/card-cover-publication/card-cover-publication.styl 
./publishers/client/components/video/video-cover-custom-item/video-cover-custom-item.styl 


Web: 1 


./ui-lib/src/_mixins/colors2.sty| 
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НА СХЕМЕ 


МоссиФ 


UBeT ob 


Поиск 


| дЛиЖжойшего 


Показывать зарезолвенные цвета 


Показывать плоско 


Divkit iOS Android Web 


near 


похожий РАССТОЯНИЕ 


= 
| = 
с 
m 
-4 


0.197 
г90(254 84,25) rgb(255, 83, 23) 
orange_50 
| е е Е 
г90(254 254 254) г90(255, 255, 255) 
primary_white 
3 0.280 
rgba(255,255,255,0.25) rgba(255, 255, 255, 0.24) 
white_alpha_24 
4 0.287 
rgba(0,0,0,0.42) габа(0, 0, 0, 0.4) 
юїаск. арпа 40 
5 0.365 
габа(0,0,0,0.48) габа(0, 0, 0, 0.45) 
ШасКк аїрпа 45 
6 0.393 


rgb(4,118,255) rgb(0, 119, 255) 
blue_50 


МЕСТА ИСПОЛЬЗОВАНИЯ 


Web: 1 


.Ipublishers/clientfcomponents/publications/publications-year-results-banner/publications-year-results-banner-view.styl 


Web: 1 


./publishers/client/components/common/card/card.sty! 


Web: 2 


./publishers/client/components/author-live/author-live-event-log/author-live-event-log.sty! 
./ui-lib/src/chat-info/chat-info.tsx 


Web: 2 


./rezen/src/comments/comment-editor-live-stream-container/comment-editor-live-stream-container.sty| 
./rezen/src/comments/comment-editor/comment-editor-view.sty! 


Web: 2 


./publishers/client/components/common/card-cover/card-cover-publication/card-cover-publication.sty! 
./publishers/client/components/video/video-cover-custom-item/video-cover-custom-item.styl 


Web: 1 


./ui-lib/src/_mixins/colors2.sty| 
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GIT КЕКЕКЕ 


JAVASCRIPT.RU 


https://learn.javascript.ru 
Илья Кантор 


it 
ReReRe - авторазрешение 
одинаковых конфликтов 
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GIT КЕКЕКЕ 


"гера(0,0,0,0.80) > black_alpha_78", 
"ГРра(0,0,0,0.68) — black_alpha_66", 
"ГРра(0,0,0,0.32) — black_alpha_38", 
"гера(255,255,255,0.87) ¬+ white_alpha_/9", 
"rgba(255,255,255,0.60) -> white_alpha_69", 
"rgba(255,255,255,0.45) -> white_alpha_48", 
"rgba(255,255,255,0.38) => white_alpha_35", 
"rgba(255,255,255,0.84) — white_alpha_79", 
"гера(51,51,51,0.04) — black_alpha_5", 
"гера(51,51,51,0.08) — black_alpha_8", 


"rgba(29,29,29,0.09) — black_alpha_8", 
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Показывать зарезолвенные цвета 


Показывать плоско 


Divkit ios Android Web 


1 


% 


rgb(4,118,255) 


rgb(0, 119, 255) 
blue_50 


./ui-lib/src/_mixins/colors2.sty| 
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+ ГЛАВА 4: ПОИСК 


Моссив 


WbeT ob 


Поиск 
бЛиЖжойшего 


7З 


Моссив 


WbeT ob 


Рондомньй \ 


цвет 


Поиск 
бЛижойшего 
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#ссс 


Использовать агаб формат (используется в Divkit и Andr 


Введенный цвет: rgb(204,204 204) 


Найдено в палитре: зном: 


Цвет Безоп 4 ФО С: | авс at | х Безопасна замена?” 


rgb(230, 230, 229) 


Название фикс. токена Расст‹ 


warm_grey_20 5.990: 


Используется в семантических токенах: 
Безопасна замена?” 


Да 


applied_interview_inactive 


rgb(230, 230, 229) rgb(230, 230, 229) 
light dark 


Расстоание ` 


а РВ o a 0.7362760143458879 


ОПАСНО 


+ была прозрачность, а предлагаетса без 
прозрачности и наоборот 


был чисто белый/черный, а 
предлагаетса серый и наоборот 


+ расстояние между цветами больше 5 


W v м 
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+ ГЛАВА 5: ГРАФИКИ 


ПЛОХОМЕТР 


Делайте 


плохометрь!! 


https://youtu.be/MJarhtva5-Y 
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ПЛОХОМЕТР 


Ongoing: eslint | icons — Finished: prettier | СЕ/ЕЕ diff | jest 


Is GitLab polished yet? 


During the conversion from CoffeeScript to modern ECMAScript we have disabled а lot of евііпе rules in certain files. 
The data below shows how far we have come in fixing those disabled rules. It is generated every 4 hours. 


89.48% polished 


6148 of 6871 js and vue files have по lints. 
If we remove all eslint-disable from all files, мед have to fix 1877 Errors апа 220 Warnings. 


Here is an overview of all files: 


пишишшшшшшишишшшшшшишшшшшшшшшшшшшишшшшшишшшшшшшшшишшшишшшшшшшишишшшшшшшишшшшшишшшшшшшшшшишшшшишшшшишшишшшшшишшшшшшишшшшишишшшшшшшишшшшшшшшшишшшишшшишшшишишшшшшишшшишшшшшшишшшшишшшшишшшишшшишшшшшшиш 
(1111111111111111111111111111111111111111111111111131 (11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 
УТУ ааа ааа ааа ааа ааа аа ааа ааа ааа ааа ааа ааа аа аа аа аа аа ааа ааа аа ааа аа аа ИИ ааа аа аа ааа ааа ааа аа аа аа аа аа аа аа ааа ааа аа аа аа ааа ааа ааа аа аа аа аа ааа ааа Ei аа ааа ааа аа аа аа аа аа аа аа ааа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа Pú FG Ri G EL BQ Ei 
lI I III ааа ааа ааа ааа ааа ааа ааа ааа ааа аа аа аа аа ааа ааа аа ааа ааа ааа ааа ааа аа ааа аа ааа аа ааа аа ааа аа ааа аа ааа ааа аа аа I I ааа ааа ааа аа ааа ааа аа ааа ааа ааа ааа ааа аа ааа ааа ааа аа аа ааа ааа ааа ааа аа ааа аа... . 
III II ааа ааа ааа ааа ааа аа ааа ааа ааа ааа аа аа ааа ааа ааа ааа ааа ааа аа аа аа аа а.а ааа аа аа ааа ааа ааа ааа аа аа ааа ааа аа ааа ааа аа ааа ааа аа ааа аа аа аа аа аа аа аа аа ааа ааа ааа ааа ааа ааа ааа аа ааа аа аа ааа аа аа аа ааа аа аа а а.а а а.н... 
ГУТ ааа ааа ааа аа ааа аа ааа аа ааа ааа ааа ааа ааа аа аа аа ааа ааа аа аа аа аа аа ааа аа ааа аа аа. а.а аа ааа аа аа аа аа аа аа аа аа аа аа аа аа аа аа ааа аа аа ааа аа аа аа аа аа аа аа аа ааа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа 5 аа аа ааа а.а аа аа аа аа аа аа аа аа аа аа аа аа аа аа ааа аа аа аа аа аа | BD Pi 
| I I ааа ааа ааа ааа ааа аа ааа ааа ааа аа аа аа аа аа ааа аа аа аа ааа ааа аа аа аа аа аа аа аа аа аа а.а аа ааа аа аа аа ааа аа аа аа аа аа аа аа аа аа аа аа аа аа ааа аа аа аа аа аа ааа аа аа аа аа аа ааа аа аа аа аа аа ааа а.а а ааа аа аа аа НИКИ Ни 
| ааа ааа ааа ааа ааа ааа аа ааа аа ааа ааа аа ааа ааа аа ааа ааа ааа ааа аа аа ааа аа аа ааа ааа ааа аа ааа аа аа ааа ааа аа аа аа аа аа аа аа ааа ааа аа КУ аа ааа ааа аа аа аа аа аа аа аа аа ааа аа аа аа аа аа аа аа ааа аа аа аа аа аа аа аа а аа а аа аа аа аа аа ИНН 
ааа ааа аа ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа El Ei Ei аа ааа ааа аа ааа ааа ааа ааа ааа аа аа Bš Hü Ej š ааа ааа ааа ааа аа FB E: ааа аа E Eü Es ааа ааа ааа ааа аа аа аа ааа аа ааа ааа ааа ааа ааа Ei Ei EH аа аа ааа eee 
F... везесе ааа ааа ааа аа аа аа аа а.н. (11111! ооо a тын шыш =... пи [1 11] C Еш шиша (11111111)! 
Ei FO Ei BD EL Di Bl (111111211111111111111: нан a (11111111! нини 1111111! | 1111! | a E E Ei El El El воно m m m ë m a (1111111:! ини ОН РА ЕВ Ei А Bü РА N 
| КЕ III кг кг ааа ааа аа ааа ааа ааа ааа ааа аа ааа ааа ааа аа ааа аа аа аа ааа ааа ааа аа аа аа аа ааа аа ааа аа аа ааа аа аа аа ааа ааа Il аа ааа аа аа аа аа аа аа ааа аа аа аа аа ааа ааа аа ааа аа аа ааа ааа I ааа ИИН ааа аа аа аа аа аа аа аа аа аа аа а а а.н... 
| II III ааа аа ааа ааа ааа аа аа ааа ааа ааа ааа ааа ааа аа аа ааа ааа аа аа ааа аа аа eee ГУУ ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа аа аа ааа ааа аа аа аа аа ааа аа аа аа ааа ааа ааа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа Ei Fl на... 
ааа ааа ааа ааа ааа ааа аа аа ааа ааа ааа аа аа аа ааа аа аа аа аа аа аа аа аа аа аа аа аа аа а.н... ааа ааа ааа ааа ааа аа ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа аа аа ааа аа аа ааа аа ааа аа а.а ааа ааа аа аа аа аа аа аа аа аа аа аа аа ИКИ 
иааааааааа ааа ааа ааа аа ааа ааа ааа аа аа аа ааа ааа ааа ааа шини УТУ ааа ааа ааа ааа ааа ааа М ааа ааа ааа ааа ааа ааа аа аа аа аа а.н. ва птш 
НИ ааа ааа ааа ааа ааа ааа ааа ааа аа ааа ааа eee (1111111111111! (11111111111111111111111111111111111111! Еш (111111! 
иааааа ааа ааа ааа аа ааа аа ааа ааа ааа ааа ааа аа аа ааа а.н. m E F... ааа ааа ааа ааа ааа ааа аа ааа Ej E Hü GH E ааа ааа ааа ааа ааа аа аа аа а.н. шш (111111! 
(1111! (111111211111111111111: ЕН a (11111! (11111111! (11111!) (11111! = аа НЕ НБЕНЕІНЕРБ 
(1111! ни mm m ааа ааа ааа ааа аа eee шин Fr... B= m m m mm mu m 1111! | C (111! п ша Е [| | C m (11111111! 
ааа ааа ааа ааа М ааа ааа ааа аа ааа аа ааа ааа аа аа ааа ааа М а.а аа ааа ааа аа аа аа аа аа аа аа аа аа ааа аа аа аа аа аа аа аа аа аа ааа аа аа ааа ааа аа аа аа ааа аа аа аа аа аа аа аа аа аа ааа ааа аа аа аа аа аа аа аа а.а аа ааа аа аа аа аа ааа аа аа аа аа ааа аа аа аа аа .а аа .а а.н... 
Bi Ea Ei Bj ааа ааа ааа ааа ааа аа ааа ааа ааа аа аа аа аа ааа ааа ааа нини ааа ааа аа ааа ааа аа ааа ааа ааа ааа ааа ааа ааа ааа аа ааа ааа ааа ааа аа аа ааа ааа аа ааа ааа аа аа ааа ааа аа аа аа аа аа Es Bi Ei Ë BL iñ | 
ааа ааа ааа ааа ааа ааа аа аа ааа ааа ааа ааа ааа аа аа аа аа ааа аа ааа аа аа аа аа аа аа аа ан. шини аааа ааа ааа к аа ааа ааа аа ааа ааа аа ааа ааа ааа ааа ааа аа аа аа аа аа аа аа аа ааа ааа аа аа М аа аа аа ааа аа аа аа аа аа FÚ EL Bi аа аа аа аа Dñ ED Fi El šI FL | 
E Es Er [i Es El Bs ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа аа ааа аа ааа ааа аа ааа. сова (111111111111111112111111111111111111111111111111111111111111111111111111111111111 
E E m m аа ааа ааа ааа ааа ааа аа ааа ааа аа ааа аа аа аа аа ааа ааа ааа ааа ааа аа аа аа аа аа E m ü E. сова I III ааа ааа ааа ааа ааа аа ааа аа ааа ааа ааа ааа ааа ааа ааа аа ааа аа аа ааа аа ааа ааа ааа аа а.а аа ааа аа аа аа аа аа аа аа ааа аа аа аа аа аа аа ||: 
(111111! (11111121111111111111111111111111111111111111 (11111111111111111111111111111111111111111111111111111111111111111111111111111111 
паа ааа ааа ааа ааа ааа ааа ааа ааа ааа аа ааа аа аа аа аа ааа аа ааа ааа аа аа аа аа аа шини ааа ааа ааа ааа ааа аа ааа ааа ааа ааа ааа ааа ааа ааа ааа аа аа аа ааа аа аа ааа М I аа ааа ааа аа аа ааа аа аа аа Кии 
ааа ааа ааа ааа ааа ИИ аа ааа ааа ааа ааа ааа ааа ааа ааа шини I III ааа ааа ааа ааа аа ааа аа ба ааа ааа ааа ааа аа ааа ааа ааа ааа аа ааа ааа ааа ааа ааа аа ааа ааа ааа аа ааа ааа ааа ааа аа аа аа R 
lI I ки ааа ааа ааа ааа ааа аа аа ааа ааа ааа аа аа аа аа аа аа ааа аа аа ааа аа аа аа аа а аа аа аа а.н... ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа ааа аа аа ааа аа ааа аа аа аа аа аа аа аа ааа аа а.а аа ааа аа аа аа аа ааа аа аа аа аа аа ||: | 
(21111111) ааа ааа ааа ааа аа аа аа аа аа а.н Hoe нони (11111111)! (11111!) н нинини (11111111!) анаан a B Ë BL ë| 8 EE NE C 117111111! | 
1111111 (1111121111111111111 (11111! Ka E ин КІ ви (11111) B E El m H BI ишшшшшшиш (11111! Ши РН БА Ei БА Hl БА i (11111: шиши НЫ 
I II III ааа ааа ааа ааа ааа ааа ааа аа ааа на... ква ваша E I Wi Fú Ej E F ИКИ Gü Fú Eq mt Ei mÜ E PL Eš Eñ BH EQ EC Ed ñm EG Eú Bú Td DE FQ FQ Ej Bü Ei Fü eee Il II TI IT III IT ааа аа ааа ааа ааа ааа ааа lI] 
(1111111111111111111111111111 Baa (111111111! a (1111111111111111111111111111111111111111111111!)! (111111111111111111111111111:! 
E ко ки ааа ааа ааа ааа ааа ааа ааа ааа аа аа аа аа аа ааа аа аа аа ааа ааа аа аа аа аа аа аа ааа ааа E аа аа аа аа ааа аа аа аа ааа аа ааа аа аа аа аа ааа ааа аа аа к а.а ËI аа ааа аа аа аа аа ааа аа аа аа аа аа аа аа аа а.н... ааа ааа ааа ааа ааа аа ааа ааа ааа ааа I I TI] 
ааа ааа ааа ааа ааа ааа аа аа ааа аа ааа ааа ааа ааа ааа аа ааа ааа ааа аа аа аа аа аа аа ааа аа аа аа аа аа аа ааа ааа аа аа аа аа аа аа аа аа аа аа аа а.а аа E B а.н... ааа ааа ааа ааа ааа ааа аа аа аа ааа ааа ааа ааа ааа аа ааа ааа ааа аа аа аа ааа ааа аа на. и 
ааа ааа ааа ааа ааа ааа аа аа ааа ааа ааа аа аа аа аа ааа аа аа аа аа ааа аа аа аа аа аа аа аа аа аа аа ааа аа EC E EH аа аа аа аа аа аа аа аа аа аа аа аа аа аа аа а.а Ei Ei B DG Hi Ei HI ааа ааа ааа аа ааа ааа аа ааа ааа ааа ааа аа аа ааа ааа аа ааа ааа аа аа а аа ааа ааа а.а аа аа аа аа а.а а.н... 
ГК 2 A ааа ааа ааа ааа ааа аа аа ааа ааа ааа ааа ааа аа аа аа аа аа ааа аа аа аа аа аа аа аа аа аа аа аа аа а.а аа аа аа аа аа аа а аа аа аа аа аа аа аа аа аа Fa ш ыы ана lI I II III IT I T ааа аа ааа ааа ааа аа аа а.н 
ана. El EU El Ei Ei El Es Zl E Hl El ип я 1111! || | (1111! нини п в по пЕНППЕППНЕН па (11111111)! 
(11111!) (1111111111 =... пш =... (11! п || | ааа ааа анаан m EL m E Bi El F FL E H 
=... EU EL m EH m РА m m = B нини ва (111! Baa [| a a (111111111111111111111111111:! 
1111! | нин... El Ej F Bi BH FH тыны Ен =... (11! E El ви ааа ааа ааа ааа ааа аа ааа ааа ааа ааа аа шн 
=... (1111111111 нини но пена (11! B пя Fi (111111111111111111111111111:! 
анаан (1111111111 =... пи =... ним п m | | | иш нининининининининининининимими 
(11111!) (1111111111 =... "и HEAD aan п а ти | | | нинининининининининининининимими 
(11111! EE ВО ГА Ei Ei ËD ED СЛ бай Bü нини па (111! йш E a || | | | | E H Bü E Di B Hü Ea mi Bj BU Fi DD Gá (Tm sü Ea ааа аа ааа а.н 
BEBE a BEB взе взе ва нин | ки ки вв. вв. нШБНН зове зе зае зе свое зе зове зе R L I R lI R IL T R LI R I све R I RÚ] 
A \ Пез eslint гер all correct; в has магп ‚ в has errors. Box size proportional to amount of changes (log scale) 
Hover over a box to see path and error count 


А Ер Да АНА S4 
s-gitlab-pretty-yet/eslint 
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Поиск 
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> РІЇ 


дії rev-list --max-count=1 --first-parent --ип ="2021-05-01 Т00:00:00/" origin/master 
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Frozen colors migration 
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Strings with colors Uniq colors 
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Uniq colors ШШЩ All strings 
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Frozen SSS migration 
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555 files Styl files 


350 1635 


ES “555 files | ЕД *-styi files 
2,500 


2,000 


1,500 


File count 


1,000 


500 


зб л DD SF A SH 9 SO Ц A 5 0 & о 2 © > 6 © ә © A до од & о MH & х OQ © MH ә > 9 9 хм А % % 
ААГ ا‎ АГ (ў Уа ЭС СЭГС Л ЭС DS PKL PF м м Q д” > VW @ > ко фу PPP OM + оо 
т 4 FPP کر‎ FOP PPP ЖЕ АН هي هي‎ FFP Р Р ере ГИ Рр е РФ» у у EES 


> оо ‚> © © 


у Фо Өө © 
ғғ о ка ни Ро Р ЗИ. Ро 
$$ РАКА АДА 


<> Дзен 


Frozen colors migration 


Strings with colors Uniq colors 
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Uniq colors ШЕШЕ All strings 
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опции 


> zen_design_tokens@1.0.0 web-migrator-colors 


> node ./libs/migrator/web/web-migrator-colors.js "../frozen/packages" "--help" 
Options: 
--version Show version number [boolean] 
--danger Use danger replace, example #ccc -> rgba(255, 255, 255, 
0.6) [boolean] [default: false] 
--glob Glob relative 'frozen/packages'. Example: --glob 
"ui-lib/**/*. styl" [array] [default: [1] 
--replace Replace finded colors [boolean] [default: false] 
--match Math mode: exact - when distance to color equals zero; 


--path-raw-result 
--path-group-result 
--help 


resolved - include colors from resolved map; all - all 
colors :-) 
[choices: "exact", "all", "resolved"] [default: "exact" ] 


Path for raw grep colors result [string] 
Path for grouped grep colors result [string] 
Show help ` [boolean] 
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опции 


--danger 


Use danger replace, example #ccc -> rgba(255, 255, 255, 
0.6) [boolean] [default: false] 
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КОММЕНТЫ 


v 2 packages/lego/src/components/stub/stub.sss [^ +4 -1 | | Viewed 


@import ‘@yandex-int/zen—-uli-lib/src/tokens/tokens.sss' 


„5ТиБ 
width: 100% 
3 - background-color: %00000001 


// color-migrator-comment: $colorFixedBlackAlpha6 может быть заменем 
на семантические $colorLightFill6, $colorLightAppliedImageFill 
background-color: $colorFixedBlackAlpha6 
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// color-migrator—comment: $colorFixedBlackAlpha6 может быть заменем 
на семантические $colorLightFill6, $colorLightAppliedImageFill 


6 + background-color: $colorFixedBlackAlpha6 
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GIT DIFF 


е е ө list — chunks-pr 
۹ list x 
| list 
1 packages/lego/src/components/stub/stub.sss 
2 packages/publishers/client/components/article-draft-page/article-draft-page.styl 
3 packages/publishers/client/components/article-feedback/article-feedback-layout/article-feedback-layout.styl 
1 4 packages/publishers/client/components/article-recommender/article-recommender-error/article-recommender-error.styl 
5 packages/publishers/client/components/article-recommender/article-recommender/article-recommender.styl 
2 6  packages/publishers/client/components/article-subscribe-banner/article-subscribe-banner.styl 
7 packages/publishers/client/components/article.m/article-footer/article-footer.crit.styl 
шч 8  packages/publishers/client/components/article.m/article-footer/menu-bar/menu-bar.crit.styl 
9 packages/publishers/client/components/article.m/article/article.crit.styl 
10 packages/publishers/client/components/article.m/blocks.styl 
ü 11 packages/publishers/client/components/article.m/render-heat-map/render-heat-map.styl 
12 packages/publishers/client/components/article/article-ad-label/article-ad-label.crit.styl 
13 packages/publishers/client/components/article/article-comments/article-comments.styl 
14 | packages/publishers/client/components/article/article-draft-header/article-draft-header.styl 
| 15 packages/publishers/client/components/article/article-image/article-image-editor-controls.styl 
16 packages/publishers/client/components/article/article-image/article-image-gallery-mobile-editor.styl 
17 packages/publishers/client/components/article/article-link/article-link.styl 
18  packages/publishers/client/components/article/article-render/article-render.m.styl 
19 packages/publishers/client/components/article/article-render/article-render.styl 
20 ~+packages/publishers/client/components/article/article/article.crit.styl 
21 packages/publishers/client/components/article/article/blocks.crit.styl 
ү 22 packages/publishers/client/components/article/publisher-suggested-publications/publisher-suggested-publications.styl 
4 23 packages/publishers/client/components/article/theme-tags/theme-tags.styl 
24  packages/publishers/client/components/author-live/author-live-event-log/author-live-event-log.styl 
Y 25 packages/publishers/client/components/author- -live/author- live- A Sei ett live- WO styl 
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ПОГНАЛИ В КОД 


Assigned Mentioned Review requests С) is:pr author:semeleven archived:false is:closed безопасная замена 5 
со 
СТ 
11 0 Open ~ 76 Closed Visibility + Organization + Sort > + 
і» zen/frozen ZEN-71866: Безопасная замена цветов в video-player (2 из 2) ~ (41 
#8242 by semeleven was merged 28 days ago " Approved Е 0019 
І» теп/їготеп 2ЕМ-71865: Безопасная замена цветов в Video-player (1 из 2) v (15 
#8241 by semeleven was merged 28 days ago " Approved Е 0 of 10 
Іі» теп/їготеп 2ЕМ-71864: Безопасная замена цветов в ui-lib part 2 (1 из 1) ~ (24 
#8240 by semeleven was merged 26 days ago · Approved Fl 0016 
i= zen/frozen 2ЕМ-71861: Безопасная замена цветов в publishers part 2 (33 из 33) ~ (23 
#8239 by semeleven was merged 24 days адо · Approved Е 0 of 10 
 zen/frozen ZEN-71860: Безопасная замена цветов в publishers part 2 (32 из 33) v (2 31 
#8238 by semeleven was merged 26 days ago " Approved Е 0 of 10 
i= теп/їготеп ZEN-71859: Безопасная замена цветов в publishers part 2 (31 из 33) ~ (411 
#8237 бу semeleven was merged 27 days ago " Approved Е} 0 of 10 
і» теп/їготеп ZEN-71858: Безопасная замена цветов в publishers part 2 (30 из 33) ~ (0 14 
#8236 by semeleven was merged 26 days ago E 0 of 10 
і» zen/frozen ZEN-71857: Безопасная замена цветов в publishers part 2 (29 из 33) v (0 16 
#8235 by semeleven was merged 26 days ago " Approved Е 0 ої 10 
i= теп/їготеп ZEN-71856: Безопасная замена цветов в publishers part 2 (28 из 33) ~ (42 
#8234 by semeleven was merged 26 days ago · Approved Fl 0 of 10 
+ теп/їготеп ZEN-71854: Безопасная замена цветов в publishers part 2 (27 из 33) ~ (08 
#8233 by semeleven was merged 26 days ago · Approved Е О of 10 
і» zen/frozen ZEN-71853: Безопасная замена цветов в publishers part 2 (26 из 33) ~ (2 15 101 


#8232 by semeleven was merged 15 days ago · Approved Е] 0 ої 10 
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Semantic Colo... 
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Общие принципы, зачем all color 
и semantic colors 


«Все цвета заданы переменными 
„Любой цвет в токенах берется из общего списка цветов 


«Не используем Нех-коды, любой элемент в мажете должен 
использовать токены 


“Скрипт выгрузки сверяет любой цвет из токенов (Semantic 
colors) с списком всех цветов 


Как добавить цвет в палитру 
„Любой отсутствующий цвет сначала добавляєтся в all colors 
+ Ranee цвет добавляется в токены 


«Добавленньй токен должен подразумевать дапьнейшее 
переиспользование, стараемся избегать добавления токенов 


используемых в единичных случаях 


Если компонент или кусок интерфейса 
не перекрашивается (например видео 
расхлопы в Дзене) 


“Цвет тянется из токенов нужной темы с указанием форсинга 
темы 


• не желательный вариант - брать цвет из переменных, 
игнорируя токены и семантику 


"нме используем модификатор stricta цветовом переменной 
если цвет не меняется при перекраске темы 


Фоны и поверхности 


Используются не прозрачные холодные 


темныые цвета 


Темная тема 


4 уровня (оттенка) фонов, если смотреть 


по оси z 
Светлая тема 


Самая нижняя поверхнк 
на морде ив ПП), все что выше - бе 
{белый дублируется для того чтобы 
можно было пользоваться плагином) 


Типографика и иконки 


Чтобы не подбирать под каждый фон 
свой оттенок, используются 


прозрачности 

Не перекрашиваемые стили 
Избегаем дублирования токенов и 
делаем либо форсинг одной темы 


(светлой или темной), либо добавляем 
токен под конкретный кейс 


Заливки 


Используют 


Использование заливок практически 
ничем не ограничивается 


Стили, применительные к конкретным 
кейсам исользования или компонентам 


Для уточнения по БЮ указьвам 
в начале ZEN, РР, Serp 


Все что без обозмачемив БЮ считаєм 
общими стилями 


Широко используемые стили, 

B основном применителънме к 
компонентам, брендам, кнопкам, 
состояниям (ошибки) 


‚ Применение акцентных стилей 
практически никак ме ограничено 


«Если у компонента повалветса 
самостоятельный ацентный стиль, 
используемый в конкретном месте 
(«денежные цвета» серпа), то такие 
стипи кладутся в более конкретним 
токен 


ся для плашек поверх фонов, 
строуков, фомов в кнопках, ховеров итд, 
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Applied / Image Fill 


Applied / Overlay 


Applied / Hover 


Applied / Separator 


Accents / Нед 


Accents / Yellow 


Accents / Violet 


Теп / Accents / Orange Red 


Zen / Accents / Pink 


Zen / Accents 


Zen / Background / О 


Zen / Appked / 


Zen / Applied 
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Text Attention Background 


/ Media Transparent Baw 


Trimmer Yellow 


Trimmer Rod 
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Design 


Background 
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Text Styles 


T H 


Ag Body Text 


Ag Caption 


Color Styles 


Background [Light 


Background [Dark] 


Text and icons [Light] 


Text and icons [Dark] 


Text and icons Forced 


Fill [Light] 


Fill [Dark] 


Applied [Light] 


Applied [Dark] 


Zen Applied 


Accent [Light] 


Accent [Dark] 


const í } = require("../figma/figma-common").default; 


let hasErrors = false; 

try í 
const fixedColors = getFixedColors(figma.getNodeById(FIXED_COLORS_ID)); 
assertFixedColors( је 

const semanticColors = getSemanticColors( 
figma.getNodeById(SEMANTIC_COLORS_ID) 


| 
assertSemanticColors( 
» catch (e) í 
hasErrors = true; 
notify(` 8 В В ${е.теѕѕаде}`, 4 ids: e.ids }); 


} 


if (!hasErrors) í 
notify("@ Everything is okay"); 
} 


figma.closePLlugin( ); 
function notify(notification, meta) { 
figma.notify(not ion, { timeout: 3000 }); 


if ( ОБЈЕ 
const figma0bjs = .ід5.тар((е1) => figma.getNodeById(elL) ) 
Гү 
figma.currentPage.selection = 
figma.viewport.scrollAndZoomIntoVtew( ү: 
} catch (е) 4 
notify("0pen another page"); 
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STYLELINT 


гер(255, 51, 51) может быть заменен Ha CSS переменные: уаг(-- 
zenColorAccentsRed) 

гер(255, 51, 51) может быть заменен на фиксированный ScolorFixedRed50 
Подробнее: https: //iridescent-paprenjak-384781.netlify.app/search/? 
дегер/28255/2С5172С51/29 (frozen/no-hardcode- 

color) Stylelint(frozen/no-hardcode-color) 


. tooltip-er 
color: 100255, 51, 51) 


SIYLELINI 


color-named: never 
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ИТОГИ 


+ Качаите изобретательность 


+ Решаите проблемы, а не задачи 


+ Возьмите Material Design 
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